<template>
  <div id="goods">
    <div class="menu-wrap" ref="menuWrap">
      <ul>
        <li v-for="(list,index) in goods" :class="{'current':currentIndex===index}" @click="selectMenu(index,$event)">
          <span class="text">
            <span class="icon" v-if="list.type>0" :class="classMap[list.type]"></span>
            {{list.name}}
          </span>
        </li>
      </ul>
    </div>
    <!--right area-->
    <div class="goods-wrap" ref="goodsWrap">
      <ul>
        <li v-for="item in goods" class="good-list" ref="foodlist">
          <h1 class="title">{{item.name}}</h1>
          <ul>
            <li class="food-list" @click="selectFood(food,$event)" v-for="food in item.foods">
              <div class="icon">  <img width="57" height="57" :src="food.icon">  </div>
              <div class="content">
                <h2 class="name">{{food.name}}</h2>
                <p class="desc">{{food.description}}</p>
                <div class="extra">
                  <span class="count">月售{{food.sellCount}}份</span>
                  <span>好评率{{food.rating}}%</span>
                </div>
                <div class="price">
                  <span class="now">￥{{food.price}}</span>
                  <span class="old"  v-show="food.oldPrice">￥{{food.oldPrice}}</span>
                </div>
                <div class="cartcontrol-wrapper">
                  <!--<cartcontrol @add="addFood" :food="food"></cartcontrol>-->
                </div>
              </div>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <!--food component-->
    <!--<food :food="selectedFood" ref="food"></food>-->
  </div>

</template>

<script>
  import BScroll from 'better-scroll'
	export default{
    props:{
        seller:{
            type:Object
        }
    },
    data(){
        return{
            goods:[],scrollY:0,selectedFood:{},listHeight:[]
        }
    },
    methods:{
      _initBscroll(){
        this.menuScroll=new BScroll( this.$refs.menuWrap,{click:true} );//菜单滚动
        this.goodsScroll=new BScroll(this.$refs.goodsWrap,{click:true,probeType:3});//goods滚动
        this.goodsScroll.on('scroll',(pos)=>{ this.scrollY=Math.round(pos.y)})//滚动获取y坐标
      },
      _calculateHeight(){
        let foodList = this.$refs.foodlist;
        let height = 0;
        this.listHeight.push(height);
        for (let i = 0; i < foodList.length; i++) {
          let item = foodList[i];
          height += item.clientHeight;
          this.listHeight.push(height);
        }
      },
      selectMenu(index,ev){//点击菜单滚动到指定位置
        if(!ev._constructed) return
        let foodlist=this.$refs.foodlist;
        let ele =foodlist[index];
        this.goodsScroll.scrollToElement(ele,600)
      },
      selectFood(food,ev){
        if(!ev._constructed) return;
        this.selectedFood=food;


      }
    },
    computed:{
      currentIndex(){
        for(let i=0;i<this.listHeight.length;i++){
          if((this.scrollY >= this.listHeight[i] && this.scrollY < this.listHeight[i+1])  || !this.listHeight[i+1]) return i
        }
        return 0;
      }
    },
    created(){
        this.classMap=['decrease', 'discount', 'special', 'invoice', 'guarantee'];
        this.$http.get('/api/goods').then((response) =>{
            response = response.body;
            if(response.errno ==0){
                this.goods=response.data;
                this.$nextTick(()=>{
                  this._initBscroll();
                  this._calculateHeight();
                })
            }
        })
    },
    components:{
        //food
    }
	}
</script>

<style scoped lang="less" rel="stylesheet/less">
  @import "../../common/less/mixin.less";
#goods{
  width:100%; overflow: hidden; position: absolute; top:174px;bottom: 46px;left: 0; display: flex;flex-flow: row nowrap;
  .menu-wrap{
    flex: 0 0 80px;background: #f3f5f7;
    li{
      display: table;width: 56px; height:54px;line-height:14px; padding:0 12px;
      &.current{
        position: relative;  z-index: 10; margin-top: -1px; background: #fff; font-weight: 700;
        .text{.border-no()}
      }
      .text{
        display: table-cell;width: 56px; vertical-align: middle;  .border-1px(rgba(7, 17, 27, 0.1)); font-size: 12px;
        .icon{
          display: inline-block; vertical-align: top; width: 12px; height: 12px; margin-right: 2px;
          background-size: 12px 12px; background-repeat: no-repeat;
          &.decrease{.bg-image('../../components/goods/decrease_3');}
          &.discount{.bg-image('../../components/goods/decrease_3');}
          &.guarantee{.bg-image('../../components/goods/decrease_3');}
          &.invoice{.bg-image('../../components/goods/decrease_3');}
          &.special{.bg-image('../../components/goods/decrease_3');}
        }
      }
    }
  }
  .goods-wrap{
    flex:1 ;
    .good-list{
      .title{padding-left: 14px; height: 26px;  line-height: 26px; border-left: 2px solid #d9dde1;
        font-size: 12px;color: rgb(147, 153, 159);background: #f3f5f7;}
      .food-list{display: flex;  margin: 18px; padding-bottom: 18px; .border-1px(rgba(7, 17, 27, 0.1));
        &:last-child{.border-no(); margin-bottom: 0}
        .icon{  flex: 0 0 57px; margin-right: 10px;}
        .content{flex: 1;
          .name{margin: 2px 0 8px 0;  height: 14px;  line-height: 14px; font-size: 14px;  color: rgb(7, 17, 27);}
          .desc, .extra{line-height: 10px; font-size: 10px; color: rgb(147, 153, 159);}
          .desc{line-height: 12px;  margin-bottom: 8px}
          .count{margin-right: 12px}
          .price{font-weight: 700;  line-height: 24px;
            .now{margin-right: 8px; font-size: 14px;  color: rgb(240, 20, 20); }
            .old{text-decoration: line-through;font-size: 10px; color: rgb(147, 153, 159);}
          }
          .cartcontrol-wrapper{position: absolute; right: 0;  bottom: 12px;}








        }




      }
    }
  }
}
</style>


